DESIGN SYSTEM
Fundamentos da plataforma de análise
Linguagem visual densa, legível e séria para analistas técnicos. Tom neutro com whitespace generoso; números sempre em monoespaçada para alinhamento e leitura precisa. O mesmo eixo de agrupamento por segmento, os filtros e a navegação são idênticos nas quatro visões — e o sistema é projetado para receber novas fontes sem reescrever a camada de design.
Use o painel de Tweaks para alternar variações: navegação (sidebar / abas), posição dos filtros (lateral / superior) e tratamento dos gráficos (linha / área).
01 — COR
Neutros (base fria)
{{ s.name }}
{{ s.hex }}
Primária & semânticas
{{ s.name }}
{{ s.hex }}
Paleta categórica — segmentos da economia (eixo compartilhado)
{{ s.name }}
{{ s.hex }}
02 — TIPOGRAFIA
IBM Plex Sans — interface
Receita Bruta consolidada
Comparação entre séries por segmento
Texto de apoio, legendas e descrições densas.
IBM Plex Mono — números & eixos
R$ 18,4 bi
+12,4% 1.284.302
jan/23 · T2/24 · 2025
03 — COMPONENTES
KPI CARD
Valor transacionado
R$ 4,2 bi
+8,3% vs ano ant.
{{ demoSpark }}
TOGGLE DE COMPARAÇÃO
CréditoDébito
REALIZADO vs PROJETADO
Realizado — linha sólida
Projetado — tracejado + hachura
CHIP DE AGRUPAMENTO
Eletrônicos
Serviços
{{ g.title }}
{{ vc.modeToggle.title }}
{{ vc.modeToggle.hint }}
Agrupamento por segmento · {{ groupHint }}
Selecione 1 segmento para sobrepor as fontes
{{ k.label }}
{{ k.value }}
{{ k.deltaTxt }} {{ k.deltaSuffix }}
{{ k.spark }}
{{ ch.title }}
{{ ch.sub }}
{{ ch.svg }}
Realizado
Projetado